<!-- @format -->
<script setup lang="ts">
import { computed, toRefs } from 'vue'
// import { Goods } from "@types/index";
import { forEach } from '@utils/index'
// import { forEach } from "lodash"

// page container component view item
// 组件名
const comp_name = 'GoodsCard'
// 组件属性
const props = defineProps({
    gid: { type: String, default: 'g000' },
    ginfo: {
        type: Object,
        default: {
            gname: '草莓蛋糕 🍰',
            gtype: 'cake',
            img: '/static/goods.jpg',
            isSelected: true,
            isValid: false,
            spec: { size: '5寸', taste: '正常糖' },
            price: 67,
            count: 1,
            tags: ['标签1', '标签2'],
        },
    },
    btn_size: { type: Number, default: 56 },
    img_size: { type: Number, default: 88 },
    card_size: { type: Number, default: 128 },
})
// console.log("商品卡片创建完成")
// 描述列表
const { gname, price, img, isSelected, isValid, spec, tags, count } = toRefs(props.ginfo)
const desc = computed(() => {
    let spec_desc = ''
    forEach(spec.value, (item) => (spec_desc += `，${item}`))
    return `已选：${gname.value}${spec_desc}`
})
// 滑块吸附位置
const stick_side: 'left' | 'right' = 'left'
// 定义方法
function onChange(e) {
    console.log('当前值为: ', e)
}
</script>

<template>
    <comp id="goods-card" class="flex jc-start hide-scrollbar">
        <!-- 复选框 -->
        <checkbox class="check item fs-0 flex" :checked="isSelected" :value="gid" />
        <!-- 左：商品图片 -->
        <image class="img item fs-0" :src="img" mode="scaleToFill" />
        <!-- 右：商品信息 -->
        <view class="info item fs-0 flex-col ai-start">
            <view class="top">
                <text class="title item">{{ gname }}</text>
            </view>
            <view class="mid">
                <text class="desc item">{{ desc }}</text>
            </view>
            <view class="bottom flex jc-sb">
                <view class="tags">
                    <text v-for="tag in tags" class="tag">{{ tag }} </text>
                </view>
                <up-number-box v-model="count" @change="onChange" />
            </view>
        </view>
        <!-- 删除按钮 -->
        <up-button
            class="btn item fs-0 flex"
            data-message="delete-goods"
            type="error"
            text="删除"
            size="large"
            shape="square"
        />
    </comp>
</template>

<style scoped lang="scss">
#goods-card {
    $radius: 8px;
    $img-size: 88px;
    $btn-size: 56px;
    width: 100%;
    height: 128px;
    overflow: scroll;
    background-color: #fff;
    border-radius: $radius;
    &.valid {
    }
    &.invalid {
    }
    .check {
        width: $btn-size;
        height: 100%;
    }
    .img {
        width: $img-size;
        height: $img-size;
        // height: 100%;
        border-radius: $radius;
    }
    .info {
        width: calc(100% - $btn-size - $img-size);
        height: 100%;
        padding: 6px;
    }
    .btn {
        width: $btn-size;
        height: 100%;
    }
}
</style>
